<template>
        <div>
                <transition name="fade"
                            mode="out-in">
                        <router-view></router-view>
                </transition>
                <div class="tabbar">

                        <router-link to="/home/shouye">首页</router-link>
                        <router-link to="/home/baotuan">爆爆团</router-link>
                        <router-link to="/home/dingdan">订单</router-link>
                        <router-link to="/home/wode">我的</router-link>

                </div>

        </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.tabbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        bottom: 0;
        width: 100%;
        padding: 10px 0;
        border-top: 1px solid #ccc;
        // > a {
        //         text-decoration: none;
        //         color: black;
        // }
}
a {
        text-decoration: none;
        color: black;
}
.router-link-active {
        color: lightskyblue;
}

//入场动画
.fade-enter {
        // 动画开始时的状态
        // opacity: 0;
        // transform: scale(0);
        transform: rotate(0deg);
        // transform: scale(0) rotate(0deg);
}
.fade-enter-active {
        transition: all 0.2s;
}
.fade-enter-to {
        // 动画结束时的状态
        // opacity: 1;
        transform: rotate(360deg);
        // transform: scale(1) rotate(360deg);
}

//离场动画
.fade-leave {
        // 动画开始时的状态
        // opacity: 1;
        // transform: scale(1) rotate(360deg);
        transform: rotate(360deg);
}
.fade-leave-active {
        transition: all 0.2s;
}
.fade-leave-to {
        // 动画结束时的状态
        // opacity: 0;
        // transform: scale(0) rotate(0deg);
        transform: rotate(0deg);
}
</style>